import { Component, OnInit } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd';
import { PageModelService } from 'src/app/service/page-model.service';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, throttleTime } from "rxjs/operators";
@Component({
  selector: 'app-page-editor',
  templateUrl: './page-editor.component.html',
  styleUrls: ['./page-editor.component.less']
})
export class PageEditorComponent implements OnInit {

  constructor(private pageModelService: PageModelService) { }
  pageModelList = []
  isLoad = false
  public dataStream: Subject<PageModel> = new Subject<PageModel>();
  async ngOnInit() {
    this.dataStream
      .pipe(debounceTime(500)).subscribe((item) => {
        console.log(item)
        this.pageModelService.update(item, item.id).subscribe(res => { })
      });
    this.getData()
  }
  getData() {
    this.pageModelList = []
    this.pageModelService.findAll().subscribe(result => {
      this.pageModelList = result['data'];
      this.isLoad = true
    });
  }

  create(type) {
    let model = {
      els: [
        {
          type: 'title',
          text: '',
          color: '#333',
          textAlign: 'center',
          backgroundColor: '#fff'
        }, {
          type: 'player',
          topLeft: false,
          topRight: false,
          bottomLeft: false,
          bottomRight: false,
        }
        , {
          type: 'roomList',
          shield: []
        },
        {
          type: 'advert',
          advertList: []
        },
        {
          type: 'static',
          text: ""
        },
        {
          type: 'danmuList'
        },
        {
          type: 'danmu'
        }
      ],
      background: {
        backgroundColor: '#fff',
        backgroundImage: '',
        select: 1
      },
      document: {
        title: ''
      }
    }
    let model2 = {
      els: [
        {
          type: 'title',
          text: '',
          color: '#333',
          textAlign: 'center',
          backgroundColor: '#fff'
        }, {
          type: 'player',
          topLeft: false,
          topRight: false,
          bottomLeft: false,
          bottomRight: false,
        }, {
          type: 'tabs',
          tabs: [{
            name: 'tab1',
            data: []
          }, {
            name: '直播回放',
            data: [
              {
                type: 'collectplatform',
                title: '直播回放'
              }
            ]
          }]
        }
      ],
      background: {
        backgroundColor: '#fff',
        backgroundImage: '',
        select: 1
      },
      document: {
        title: ''
      }
    }
    this.pageModelService.create({
      modelName: "模板名称",
      type,
      model: type == 1 ? JSON.stringify(model) : JSON.stringify(model2)
    }).subscribe(() => {
      this.getData()
    });
  }
  save(item) {
    this.dataStream.next(item);
  }
  ngOnDestroy() {
    this.dataStream.unsubscribe()
  }
}

export interface PageModel {
  id: number
  model: string
  modelName: string
  type: number
  userId: number
}